<template>
  <div>
    <!-- 头部搜索 -->
    <div class="header">
      <comp-search></comp-search>
      <!-- 导航模块 -->
      <div class="swiper-container header-nav">
        <ul class="swiper-wrapper hd-list">
          <li
            class="swiper-slide"
            @click="navLinkage(i, e.path)"
            :class="`${hindex == i ? 'active' : ''}`"
            v-for="(e, i) in movieList"
            :key="i"
          >
            {{ e.name }}
          </li>
        </ul>
      </div>
    </div>
    <keep-alive>
      <!-- 动态路由传值 -->
      <component :is="homeName"></component>
    </keep-alive>

    <!-- 内容区 -->
    <!-- 底部 -->
    <comp-footer></comp-footer>
  </div>
</template>
<script>
import Swiper from "swiper";
import compSearch from "../components/comp-search.vue";
// 引入导航页面
import hpage1 from "../homepages/home-page1.vue";
import hpage2 from "../homepages/home-page2.vue";
import hpage3 from "../homepages/home-page3.vue";
import hpage4 from "../homepages/home-page4.vue";
import hpage5 from "../homepages/home-page5.vue";
import hpage6 from "../homepages/home-page6.vue";
import hpage7 from "../homepages/home-page7.vue";
//
import CompFooter from "../components/comp-footer.vue";
export default {
  name: "Home",
  data() {
    return {
      movieList: [
        { name: "放映厅", path: "hpage1" },
        { name: "推荐", path: "hpage2" },
        { name: "今日看点", path: "hpage3" },
        { name: "热片解读", path: "hpage4" },
        { name: "预告片", path: "hpage5" },
        { name: "说电影", path: "hpage6" },
        { name: "小说", path: "hpage7" },
      ],
      homeName: "hpage1", //初始化
      hindex: 0, //初始化索引
    };
  },
  components: {
    compSearch,
    hpage1,
    hpage2,
    hpage3,
    hpage4,
    hpage5,
    hpage6,
    hpage7,
    CompFooter,
  },
  methods: {
    navLinkage(index, path) {
      this.hindex = index;
      this.homeName = path;
      // console.log("---->", index, path);
    },
  },
  mounted() {
    new Swiper(".swiper-container", {
      // autoplay: false, //可选选项，自动滑动
      slidesPerView: 3,
      slidesPerGroup: 1,
    });
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  // width: 351px;
  // margin: 0 auto;
  // padding: 0 12px;
  .header-nav {
    width: 100%;
    height: 40px;
    background: rgb(255, 255, 255);
    z-index: 99;

    .hd-list {
      width: 351px;
      margin: 0 auto;
      padding: 0 12px;
      display: flex;
      justify-content: space-between;

      li {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;
      }
      .active {
        font-size: 18px;
        font-weight: bold;
        border-bottom: 2px solid rgb(255, 213, 213);
        animation: movies 0.6s;
      }
    }
  }
}
.header-nav {
  position: fixed;
  top: 44px;
}
@keyframes movies {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>